<template>
    <div class="goodsinfo-container">
        <!-- 图片轮播 -->
        <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<my-carousel :lunbotu="lunbotu" :isfull="false"></my-carousel>
					</div>
				</div>
		</div>
        <!-- 信息展示 -->
         <div class="mui-card">
				<div class="mui-card-header">
                   <h1>{{ goodsinfoList.title }}</h1>
                </div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<div class="price">
                            市场价：<del>&yen;{{ goodsinfoList.market_price}}</del>&nbsp;&nbsp;
                            销售价：<span>&yen;{{ goodsinfoList.sell_price}}</span>
                        </div>
                        <div class="buy-number">
                            购买数量：<number-box></number-box>
                        </div>
                        <p>
                            <mt-button type="primary" size="small">立即购买</mt-button>
                            <mt-button type="danger" size="small">加入购物车</mt-button>
                        </p>
					</div>
				</div>
		</div>
        <!-- 商品参数 -->
         <div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>商品货号：{{ goodsinfoList.goods_no}}</p>
						<p>库存情况：{{ goodsinfoList.stock_quantity}}件</p>
						<p>上架时间：{{ goodsinfoList.add_time | dataFormat}}</p>
					</div>
				</div>
				<div class="mui-card-footer description-btn">
                    <mt-button size="large" plain type="primary" @click="goDesc(goodsinfoList.id)">图文介绍</mt-button>
                    <mt-button size="large" plain type="danger" @click="goComment(goodsinfoList.id)">商品评论</mt-button>
                </div>
		</div>
    </div>
</template>
<script>
import { Toast } from 'mint-ui';
import myCarousel from "../subComponents/Carousel.vue"
import numberBox from "../subComponents/goodsinfo_numberbox.vue"
export default {
  data(){
      return {
          id: this.$route.params.id,
          lunbotu:[],
          goodsinfoList:[]
      }
  },
  created(){
      this.getLunboList()
      this.getgoodsinfoList()
  },
  methods:{
      getLunboList(){
          this.$http.get("api/getlunbo").then( result =>{
                // console.dir(result.body.message )
                if( result.body.status === 0 ){
                    // console.dir(result.body)
                    this.lunbotu = result.body.message
                  console.dir(this.lunbotu)
                } else {
                   Toast('加载失败');
                }
            })
      },
      getgoodsinfoList(){
          this.$http.get("api/goods/getinfo/"+this.id).then( result =>{
                if( result.body.status === 0 ){
                    this.goodsinfoList = result.body.message[0]
                } else {
                   Toast('加载失败');
                }
            })
      },
      goDesc(id){
        this.$router.push( { name:"goodsdesc",params:{ id } })
      },
      goComment(id){
          this.$router.push( { name:"goodscomment",params:{ id } })
      }
  },
  components:{
    myCarousel,
    numberBox
  }
}
</script>
<style lang="scss" scoped>
.goodsinfo-container {
    h1 {
        font-size: 16px;
        font-weight: 700;
    }
    .price {
        padding: 10px 0px;
        del {
            font-size: 12px;
        }
        span {
            color: red;
            font-weight: 700;
            font-size: 16px;
        }
    }
    .buy-number {
        margin-bottom: 10px;
        display: flex;
        align-items: center;
    }
    .description-btn {
        display: block;
        button {
            margin: 15px 0px;
        }
    }
}
</style>


